<li class="green">
   <a data-toggle="dropdown" class="dropdown-toggle" href="#">
   <i class="icon-envelope icon-animated-vertical"></i>
   <span class="badge badge-success">5</span>
   </a>
   <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
      <li class="nav-header">
         <i class="icon-envelope-alt"></i>
         5 Messages
      </li>
      <li>
         <a href="#">
            <img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
            <span class="msg-body">
               <span class="msg-title">
                  <span class="blue">Alex:</span>
                  Ciao sociis natoque penatibus et auctor ...
               </span>
               <span class="msg-time">
                  <i class="icon-time"></i>
                  <span>a moment ago</span>
               </span>
            </span>
         </a>
      </li>
      <li>
         <a href="#">
         <img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
         <span class="msg-body">
         <span class="msg-title">
         <span class="blue">Susan:</span>
         Vestibulum id ligula porta felis euismod ...
         </span>
         <span class="msg-time">
         <i class="icon-time"></i>
         <span>20 minutes ago</span>
         </span>
         </span>
         </a>
      </li>
      <li>
         <a href="#">
         <img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
         <span class="msg-body">
         <span class="msg-title">
         <span class="blue">Bob:</span>
         Nullam quis risus eget urna mollis ornare ...
         </span>
         <span class="msg-time">
         <i class="icon-time"></i>
         <span>3:15 pm</span>
         </span>
         </span>
         </a>
      </li>
      <li>
         <a href="#">
         See all messages
         <i class="icon-arrow-right"></i>
         </a>
      </li>
   </ul>
</li>